import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import RenderDescription, {
    type DescItemDto
} from '@/components/render-descriotion/Index'
import ToolTipText from '@/components/tooltip-text/Index'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { ReportCaseResultDto } from '@/api/insurance/period/types'
import type { VxeColumnSlotTypes } from 'vxe-table'
import { Segmented } from 'ant-design-vue'
@Component
export class BillRecordView extends TableRender {
    noTablePadding = true
    noFilterPadding = true
    SegmentedIndex = '今天'
    filterConfig() {
        return {
            companyId: {
                name: '',
                element: 'datetime',
                width:'150px'
            }
        }
    }
    tableColumnConfigOld = () => [
        {
            field: 'id',
            title: '交易单号',
            slots: {
                default: (({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => { 
                    return <div class="text-blue-100">123</div>
                })
            }
        },{
            field: 'id',
            title:'类型'
        },{
            field: 'id',
            title:'账期'
        },{
            field: 'id',
            title:'实付总额'
        },{
            field: 'id',
            title:'空投总额'
        },{
            field: 'id',
            title:'超赔总额'
        },{
            field: 'id',
            title:'会员卡折扣券'
        },{
            field: 'id',
            title:'总人数'
        },{
            field: 'id',
            title:'支付时间'
        },{
            field: 'id',
            title:'总人数'
        }
    ] as TableRenderColumnTypes<ReportCaseResultDto>
	
    renderHead() { 
        return (
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    {this.renderFilter()}
                </div>
                <div class="flex-none">
                    <Segmented v-model:value={ this.SegmentedIndex } options={ ['今天', '昨天', '上周', '近7天', '近1月'] }></Segmented>
                </div>
            </div>
        )
    }
    renderTips() { 
        return (
            <div class="flex items-center bg-[#FAFAFC] rounded-base mb-8 border-blue-200 border-1 px-12 py-12">
                <div class="flex items-center mr-16">
                    <div class="text-black-200 text-base">实付总额：</div>
                    <div class="text-black-100 text-lg font-semibold">￥9849.00</div>
                </div>
                <div class="flex items-center mr-16">
                    <div class="text-black-200 text-base">空投总额：</div>
                    <div class="text-black-100 text-lg font-semibold">￥9849.00</div>
                </div>
                <div class="flex items-center mr-16">
                    <div class="text-black-200 text-base">超额总额：</div>
                    <div class="text-black-100 text-lg font-semibold">￥9849.00</div>
                </div>
                <div class="flex items-center mr-16">
                    <div class="text-black-200 text-base">会员卡抵扣券：</div>
                    <div class="text-black-100 text-lg font-semibold">￥9849.00</div>
                </div>
            </div>
        )
    }


    tableConfig() { 
        const obj = super.tableConfig()
        obj['headerAlign'] = 'center'
        return obj
    }
	
    // 
    render() {
        return (
            <div class="md:flex md:flex-col h-full overflow-auto">
                {this.renderHead()}
                { this.renderTips() }
                {this.renderTable()}
                {this.renderPager()}
            </div>
        )
    }
}

export default toNative<{}, {}>(BillRecordView)